|
 UI给出了这样一张图，饼图上不仅显示文字和数值，内部也要显示百分比。由于series中的label只能设置成饼图内部或者饼图外部，无法实现内外部兼有。此时可以在series中设置两个相同的配置对象，让两个饼图重合在一起。但一个设为内部，一个设为外部，其余的配置基本不变，代码如下
let pieEchart = this.$echarts.init(this.$refs.xxpxPie)
let title = '集团公司培训\n\n' +this.barTextCenter+'人次'
let option = {
title:{
text:title,
textStyle:{
color:'#dbbb95',
fontSize:45,
},
left:'40%',
top:'43%',
},
series:[
{
type: 'pie',
radius: ['52%', '92%'],
color:['#3dc5d1', '#ee4e40', '#fbb321'],
itemStyle: {
borderColor: '#201f1d',
borderWidth: 9,
},
label: {
show: true, //由于默认是外部，所以这里没有写position:'outside'
color:'#dbba97',
fontSize: '40',
formatter: '{b}\n\n{c}人次',
padding: [0, -180, 120, -160], //设置外部文字的位置
},
labelLine: {
show: true,
length:48,
length2:220,
// minTurnAngle:120, //两条指示线之间的角度
// maxSurfaceAngle:45, //指示线与扇形的角度
lineStyle:{
color:'#adadad',
width:2
}
},
data: this.pieData,
},
{
type: 'pie',
avoidLabelOverlap: true, //避免标签重叠
radius: ['52%', '92%'],
color:['#3dc5d1', '#ee4e40', '#fbb321'],
itemStyle: {
borderColor: '#201f1d',
borderWidth: 9,
},
label: {
show: true,
position: 'inner', //将百分比显示在饼图内部
color:'#fff',
fontSize: '37',
formatter: '{d}%',
fontWeight:'bold',
},
labelLine: {
show: true,
length:48,
length2:220,
lineStyle:{
color:'#adadad',
width:2
}
},
data: this.pieData,
}
]
}
pieEchart.setOption(option)
|